import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface PlanItem {
  id: string;
  title: string;
  iconImage?: string;
  backgroundImage?: string;
  onClick?: () => void;
  onIconClick?: () => void;
}

export interface EmergencyPlanProps {
  width?: string | number;
  height?: string | number;
  // 支持多个预案项目
  planItems?: PlanItem[];
  // 全局样式配置
  backgroundColor?: string;
  borderColor?: string;
  titleColor?: string;
  titleFontSize?: number;
  titleFontWeight?: string | number;
  titleLetterSpacing?: string;
  titleAlign?: 'left' | 'center' | 'right';
  iconSize?: {
    width?: number;
    height?: number;
  };
  showIcon?: boolean;
  itemSpacing?: number; // 项目间距
  // 兼容单个预案的旧配置
  title?: string;
  iconImage?: string;
  backgroundImage?: string;
  onClick?: () => void;
  onIconClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const EmergencyPlan = forwardRef<HTMLDivElement, EmergencyPlanProps>((props, ref) => {
  const {
    width = 500,
    height = 1080,
    subtitle = 'Emergency plan',
    planItems = [],
    backgroundColor = 'linear-gradient(135deg, #1073C8 0%, rgba(9, 71, 122, 0.7) 100%)',
    borderColor = '#00BFFF',
    titleColor = '#FFFFFF',
    titleFontSize = 16,
    titleFontWeight = 500,
    titleLetterSpacing = '1px',
    titleAlign = 'left',
    iconSize = {
      width: 31,
      height: 32
    },
    showIcon = true,
    itemSpacing = 8,
    // 兼容旧配置
    title = '应急预案',
    iconImage = 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
    backgroundImage = 'http://localhost:8085/static/images/yingjiguanli/jx.png',
    onClick,
    onIconClick,
    theme = 'dark',
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  // 如果没有提供planItems，使用兼容性配置创建单个项目
  const finalPlanItems = planItems.length > 0 ? planItems.filter(item => item != null) : [
    {
      id: '1',
      title,
      iconImage,
      backgroundImage,
      onClick,
      onIconClick
    }
  ];

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    display: 'flex',
    flexDirection: 'column',
    gap: `${itemSpacing}px`,
    ...style
  };

  const handleItemClick = (item: PlanItem) => {
    if (item.onClick) {
      item.onClick();
    }
  };

  const handleItemIconClick = (e: React.MouseEvent, item: PlanItem) => {
    e.stopPropagation();
    if (item.onIconClick) {
      item.onIconClick();
    }
  };

  const emergencyPlanClassName = ['emergency-plan', 'multi-plan', theme, className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={emergencyPlanClassName}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
        <div className="title-str">
          <div className="title">
            <div>{title}</div>
            <div className="sen-title">{title}</div>
          </div>
          <div className="subtitle">{subtitle}</div>
        </div>
        <div className="icon" style={{backgroundImage: 'url(static/images/yingjiguanli/title-bianji-icon.png)'}} />
      </div>
      <div className="content-wrap">
        {/* 渲染多个预案项目 */}
        <div className="data-wrap">
          {finalPlanItems.map((item, index) => {
            // 确保item存在且有必要的属性
            if (!item || typeof item !== 'object') {
              return null;
            }

            const safeItem = {
              id: item.id || `item-${index}`,
              title: item.title || '应急预案',
              iconImage: item.iconImage || 'http://localhost:8085/static/images/yingjiguanli/yuan.png',
              backgroundImage: item.backgroundImage || 'http://localhost:8085/static/images/yingjiguanli/jx.png',
              onClick: item.onClick,
              onIconClick: item.onIconClick
            };

            return (
              <div
                key={safeItem.id}
                className="plan-item"
                onClick={() => handleItemClick(safeItem)}
              >
                <div
                  className="plan-container"
                  style={{
                    background: backgroundColor,
                    borderColor: borderColor,
                    backgroundImage: safeItem.backgroundImage ? `url(${safeItem.backgroundImage})` : undefined
                  }}
                >
                  {/* 图标 */}
                  {showIcon && safeItem.iconImage && (
                    <div
                      className="plan-icon"
                      style={{
                        width: `${iconSize.width}px`,
                        height: `${iconSize.height}px`,
                        backgroundImage: `url(${safeItem.iconImage})`
                      }}
                      onClick={(e) => handleItemIconClick(e, safeItem)}
                    />
                  )}

                  {/* 标题 */}
                  <div
                    className="plan-title"
                    style={{
                      color: titleColor,
                      fontSize: `${titleFontSize}px`,
                      fontWeight: titleFontWeight,
                      letterSpacing: titleLetterSpacing,
                      textAlign: titleAlign
                    }}
                  >
                    {safeItem.title}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="item-head">
          <div className="head-round" style={{backgroundImage: 'url(static/images/zonghezhifa/point-icon-blue.png)'}} />
          <div className="head-title">场景监控</div>
          <div className="head-line" />
          <div className="head-right" style={{backgroundImage: 'url(static/images/zonghezhifa/left-icon-blue.png)'}} />
        </div>
      </div>
      <div className="bottom-line" />
    </div>
  );
});

EmergencyPlan.displayName = 'EmergencyPlan';

export default EmergencyPlan;
